<div class="login-container">
  <div class="container">
    <div class="login">
        <form class="login-box" [formGroup]="loginForm" (ngSubmit)="login(loginForm)">
            <p class="lead"><strong>登陆易实理财账号</strong></p>
            <div class="form-group login-form-group po-r"
              [class.has-error]="loginForm.hasError('phoneNumber','username') && loginForm.get('username').touched"
            >
                <span class="login-form-group-icon">
                    <i class="glyphicon glyphicon-user"></i>
                </span>
                <input type="text" formControlName="username" class="form-control" placeholder="请输入手机号">
                <em [hidden]="loginForm.hasError('required','username')" class="form-group-del" (click)="clear('username')"></em>
                <div class="login-tips" *ngIf="loginForm.hasError('phoneNumber','username') && loginForm.get('username').touched">
                    <em class="login-tips-warn"></em> {{loginForm.getError('phoneNumber','username')?.desc}}
                </div>
            </div>
            <div class="form-group login-form-group po-r"
              [class.has-error]="loginForm.hasError('required','password') && loginForm.get('password').touched"
            >
                <span class="login-form-group-icon">
                    <i class="glyphicon glyphicon-lock"></i>
                </span>
                <input type="password" formControlName="password" class="form-control" placeholder="请输入密码">
                <em [hidden]="loginForm.hasError('required','password')" class="form-group-del" (click)="clear('password')"></em>
                <div class="login-tips" *ngIf="loginForm.hasError('required','password') && loginForm.get('password').touched">
                    <em class="login-tips-warn"></em> 请输入密码
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <input type="text" class="form-control verification " id="exampleInputPassword1" placeholder="验证码">
                </div>
                <div class="col-md-6">
                    <img src="http://placehold.it/100x34" alt="验证码">
                </div>
            </div>
            <div class="login-tips" *ngIf="error!=null">
                <em class="login-tips-warn"></em> {{error}}
            </div>
            <div class="checkbox overflow-hidden">
                <label [class.checked]="loginForm.get('remember').value" [class.unchecked]="!loginForm.get('remember').value">
                    <input type="checkbox" formControlName="remember"> 记住用户
                </label>
                <a href="javascript:;" class="pull-right" [routerLink]="['findpwd']">忘记密码？</a>
            </div>
            <button *ngIf="!loading" type="submit" class="btn btn-default form-control" [disabled]="!loginForm.valid">登录</button>
            <button *ngIf="loading" type="submit" class="btn btn-default form-control" disabled>登录中...</button>
            <div class="text-center">
                没有易实理财账号？<a href="javascript:;" [routerLink]="['registe']">立即注册&gt;&gt;</a>
            </div>
        </form>
    </div>
  </div>
</div>
